<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
    <meta charset="utf-8">
    <title>{{page_title}}</title>
    <link rel="stylesheet" type="text/css" href="{{resource 'stylesheets/normalize.css'}}"/>
    <link rel="stylesheet/less" type="text/css" href="{{resource 'stylesheets/styles.less'}}"/>

    <link href='http://fonts.googleapis.com/css?family=Roboto:100,300,400|Playfair+Display:400,400italic'
          rel='stylesheet' type='text/css'>

    <!--[if IE]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <script type="text/javascript">
        less = {
            env: "development" // or "production"
        };
    </script>
    <script src="{{resource 'scripts/jquery-1.9.1.min.js'}}" type="text/javascript"></script>
    <script src="{{resource 'scripts/less-1.3.3.min.js'}}" type="text/javascript"></script>
    <script src="{{resource 'scripts/handlebars.js'}}" type="text/javascript"></script>
    <script src="{{resource 'scripts/theme.js'}}" type="text/javascript"></script>
</head>

<body id="home">

<header>
    <div id="top-bar">
        <div class="content">
            <div>
                <span class="locales">
                {{#eachProperty locales}}
                    {{#if value.current}}
                        {{key}}
                    {{else}}
                        <a href="{{value.url}}">{{key}}</a>
                    {{/if}}
                {{/eachProperty}}
                </span>
                <a href="/cart">
                    {{#cart}}
                        {{numberOfItems}} {{inflect numberOfItems "item" "items"}} |
                        {{#total}}
                            {{amountCompact}} {{currency.localSymbol}}
                        {{/total}}
                    {{/cart}}
                </a>
            </div>
        </div>
    </div>

    <div class="brand">
        <div class="content">
            {{#site}}
            <a href="/">
                {{#logo}}
                <img src="{{theme_site_logo_url}}" alt='{{title}}'/>
                {{/logo}}
                {{^logo}}
                <img src="{{resource 'images/logo.png'}}" alt='{{site.title}}'/>
                {{/logo}}
            </a>
            {{/site}}
        </div>
    </div>

    <nav>
        <div class="content">
            <ul class="menu">
                <li {{#isPath '/products/'}} class="active" {{/isPath}}
                    {{#isPath '/'}} class="active" {{/isPath}}>
                    <a href="/products/">Products</a>
                    {{#any collections}}
                        <ul>
                            {{#collections}}
                                <li {{#if current}}class="current"{{/if}}><a href="{{url}}">{{title}}</a></li>
                            {{/collections}}
                        </ul>
                    {{/any}}
                </li>
                <li{{#isPath '/news/'}} class="active" {{/isPath}}><a href="/news/">News</a></li>

            </ul>
            <div class="clearfix"></div>
        </div>
    </nav>

</header>

<section id="content" role="main" class="{{template}} ">

    {{include templateContent}}

</section>

<footer>
    <div id="bottom-bar">

    </div>

    <nav>
        <div class="content">
            <div class="block top left">
                <ul>
                    {{#pages}}
                    <li><a href="{{url}}">{{title}}</a></li>
                    {{/pages}}
                </ul>
                <ul>
                    {{#collections}}
                    <li><a href="{{url}}">{{title}}</a></li>
                    {{/collections}}
                </ul>
                <div class="clearfix"></div>
            </div>

            <div class="block top right">

            </div>
            <div class="clearfix"></div>
            <div class="block bottom left">
                Secured payment
            </div>
            <div class="block bottom right">
                Powered by Mayocat Shop
            </div>
            <div class="clearfix"></div>
        </div>
    </nav>
</footer>

</body>
</html>
